.listingCard {
  width: 225px;
  height: 283px;
  font-size: $tx5b;
  cursor: pointer;
  position: relative;
  bottom: 0;
  transition: all .2s ease;

  &:focus {
    outline: none;
  }

  &.ListingCard-errorCard {
    cursor: default;
  }

  .gridViewContent {
    .listingImage {
      width: 223px;
      height: 225px;
      position: relative;
      background-size: cover;
      background-position: center;
    }

    .infoArea {
      position: relative;

      .toolTip {
        &::after, &::before {
          z-index: 2;
        }
      }
    }

    .listingIcons {
      position: absolute;
      top: 8px;
      right: 8px;
    }

    .userIconWrapper {
      position: absolute;
      z-index: 1;
      top: -#{$thumb / 2};
      right: 8px;

    }

    .trimWidth {
      width: calc(100% - #{$thumb});
    }

    .verifiedModWrapper {
      position: absolute;
      top: 8px;
      left: 8px;

      .badge, .warning {
        position: static;
      }
    }

    .additionalOverlay, .editOverlay {
      bottom: 8px;
      left: 8px;
    }
  }

  .listingTitle {
    word-break: break-word;
  }

  .overlayPanel {
    display: none;
    position: absolute;
    z-index: 1; // so it's above the overlay icons

    .overlayPanelInner {
      // Using seperate element just for the overlay so that
      // the opacity doesn't affect the buttons, but we could
      // still use the clrS class (instead of RGBA).
      opacity: 0.9;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    &.coverFull {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  .blockedAvatarOverlay {
    display: none;

    i {
      font-size: 1.9rem;
    }
  }

  .nsfwOverlay, .nsfwAvatarOverlay {
    display: none;
  }

  .editOverlay {
    top: auto;

    .btn {
      z-index: 1;
    }
  }

  &:hover:not(.listingDeleting):not(.listingDeleted) {
    .editOverlay {
      display: flex;
    }
  }

  .btnShowNsfw {
    display: none;
  }

  .btnHideNsfw {
    margin-right: 5px;
  }

  .reportBtnShell {
    button {
      width: 30px;
      height: 30px;
    }
  }

  &:hover {
    .additionalOverlay {
      display: flex;
    }
  }

  .deleteOverlay {
    align-items: center;
    justify-content: center;

    .deletingText, .deletedText {
      display: none;
      text-align: center;
    }
  }

  .deleteConfirm {
    transform: translate(-50%, -100%);
    top: -12px;
    left: 8px;
  }

  &.listingDeleting,
  &.listingDeleted {
    cursor: default;
    pointer-events: none;

    .deleteOverlay {
      display: flex;

      .deletingText, .deletedText {
        z-index: 1;
      }
    }
  }

  &.listingDeleting {
    .deleteOverlay {
      .deletingText {
        display: block;
      }

      .deletedText {
        display: none;
      }
    }
  }

  &.listingDeleted {
    .deleteOverlay {
      .deletingText {
        display: none;
      }

      .deletedText {
        display: block;
      }
    }
  }

  .listViewContent {
    .listingImage {
      width: 45px;
      height: 45px;
      background-size: cover;
    }

    .verifiedModWrapper {
      position: static;

      .badge {
        position: relative;
        width: 20px;
        height: 20px;
        top: 2px;
      }

      .warning {
        position: relative;
        font-size: $tx5;
        top: 1px;
      }
    }
  }

  .listingsGridListView &,
  .listingsGridCryptoListView & {
    padding: $pad;
    display: block;
    width: 100%;
    height: auto;

    .additionalOverlay {
      @include center(false, true);
      right: 5px;      
    }

    .editOverlay {
      @include center();
    }
  }

  .listingsGridListView & {
    // The price column is a set width and the free shipping column is a maximum of 200px and 4 lines.
    // This leaves the title/description/rating to flex to take up the remaining space.
    .priceCol {
      width: 130px;
      text-align: right;
    }

    .freeShipCol {
      max-width: 200px;
      word-break: break-word;
    }
  }

  .listingsGridCryptoListView & {
    height: 65px;

    .verifiedModWrapper {
      .badge {
        position: relative;
        top: 0px;
        width: 16px;
        height: 16px;
      }

      .unverified .warning {
        font-size: 1.4rem;
      }
    }

    .vendorCol {
      .userIcon {
        width: 30px;
        height: 30px;
      }
    }

    .priceCol {
      text-align: right;

      .marketRelativity {
        font-size: 1.1rem;
      }
    }

    .inventoryCol {
      text-align: right;
    }

    .tradeArrowCol {
      text-align: center;

      .pairingSeparator {
        position: relative;
        top: 2px;
        left: -4px;
        font-weight: bold;
        
        &::before {
          font-size: 18px;
        }        
      }
    }
  }

  &.blocked {
    .blockedOverlay, .blockedAvatarOverlay {
      display: block;
    }
  }

  &.hideNsfw {
    .nsfwOverlay, .nsfwAvatarOverlay {
      display: block;
    }

    .additionalOverlay {
      .btnShowNsfw {
        display: block;
      }
    }

    .listingsGridListView & {
      .listingImage {
        opacity: 0;
      }
    }

    .btnHideNsfw {
      display: none;
    }
  }
}
